<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="exporter-version" content="Evernote Mac 9.5.12 (464966)"/><meta name="author" content="704206198@qq.com"/><meta name="created" content="2017-10-17 06:01:14 +0000"/><meta name="source" content="desktop.mac"/><meta name="updated" content="2021-06-08 01:50:31 +0000"/><title>DAY14：ES5及ES6</title></head><body><div><span style="font-size: 18px;">1.严格模式</span></div><div style="box-sizing: border-box; padding: 8px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">回顾ES5的严格模式</span></span></div></div><div><br/></div><div><span style="font-size: 18px;">2.bind方法／this关键字</span></div><div style="box-sizing: border-box; padding: 8px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div><span style="background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">  </span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(69, 69, 69); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;"> bind()</span><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(69, 69, 69); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">方法会创建一个新函数，称为绑定函数，当调用这个绑定函数时，绑定函数会以创建它时传入</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(69, 69, 69); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">bind()</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(69, 69, 69); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">方法的第一个参数作为</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(69, 69, 69); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">this</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(69, 69, 69); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">，传入</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(69, 69, 69); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;"> bind() </span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(69, 69, 69); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。</span></font></div><div><font face="Monaco" style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(69, 69, 69); font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">    </span></font></div><div><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(69, 69, 69); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">    bind可以改变当前函数的this指向</span></font></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(69, 69, 69); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">    </span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 99, 204); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">var</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">obj</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">=</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">{</span></div><div><font face="Monaco" style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(6, 6, 6); font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">        name</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(79, 93, 102); font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">:</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(40, 156, 151); font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">"admin"</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(6, 6, 6); font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">,</span></font></div><div><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">        fn</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(79, 93, 102); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">:</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 99, 204); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">function</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">(</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(181, 138, 0); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">a</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">){</span></font></div><div><font face="Monaco" style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(74, 138, 1); font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">            console</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(6, 6, 6); font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">.log(a)</span></font></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(74, 138, 1); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">            document</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">.</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(228, 139, 0); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">onclick</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">=</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 99, 204); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">function</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">(){</span></div><div><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(74, 138, 1); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">                console</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">.log(</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 99, 204); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">this</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">.name);</span></font></div><div><font face="Monaco" style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(74, 138, 1); font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">                console</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(6, 6, 6); font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">.log(a);</span></font></div><div><span style="background-color: rgb(251, 250, 248); color: rgb(74, 138, 1); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">       <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(74, 138, 1); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">         console</span></span><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">.log(</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(74, 138, 1); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">arguments</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">);</span></font></div><div><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">            }.bind(</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 99, 204); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">this</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">,</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(173, 66, 239); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">1</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">,</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(173, 66, 239); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">2</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">,</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(173, 66, 239); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">3</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">,</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(173, 66, 239); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">4</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">,</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(173, 66, 239); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">5</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">,</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(173, 66, 239); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">5</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">,</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(173, 66, 239); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">6</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">,</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(173, 66, 239); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">2</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">,</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(173, 66, 239); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">7</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">,</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(173, 66, 239); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">3</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">,</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(173, 66, 239); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">8</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">,</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(173, 66, 239); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">5</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">,</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(173, 66, 239); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">56</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">,</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(173, 66, 239); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">0</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">,</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(173, 66, 239); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">7</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">,</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(173, 66, 239); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">10</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">);</span></font></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">        }</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">    }</span></div><div><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">    obj.fn(</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(173, 66, 239); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">12</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">);</span></font></div><div><br/></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco;">    利用此原理，可以使原本没有这个功能的对象，具有另一个对象的功能</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 99, 204); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">    var</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">a</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">=</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">{</span></div><div><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">        name</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(79, 93, 102); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">:</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(40, 156, 151); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">"admin"</span></font></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">    }</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 99, 204); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">    var</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">b</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">=</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">{</span></div><div><font face="Monaco" style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(6, 6, 6); font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">        name</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(79, 93, 102); font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">:</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(40, 156, 151); font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">"uesr"</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(6, 6, 6); font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">,</span></font></div><div><font face="Monaco" style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(6, 6, 6); font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">        show</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(79, 93, 102); font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">:</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(70, 99, 204); font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">function</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(6, 6, 6); font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">(){</span></font></div><div><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(74, 138, 1); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">            console</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">.log(</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 99, 204); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">this</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">.name);</span></font></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">        }</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">    }</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">    b.show();</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 99, 204); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">    var</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">c</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">=</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">b.show.bind(a);</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">    c();</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco;">    </span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco;">    常用方式，用来改变函数内计时器函数this的指向</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">    for</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">(</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 99, 204); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">var</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">i</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">=</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(173, 66, 239); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">0</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">;i</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">&lt;</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">ali.l</span>ength;i</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">++</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">){</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">        ali[i].</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(228, 139, 0); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">onclick</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">=</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 99, 204); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">function</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">(){</span></div><div><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(228, 139, 0); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">            setTimeout</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">(</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 99, 204); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">function</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">(){</span></font></div><div><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(74, 138, 1); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">                console</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">.log(</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 99, 204); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">this</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">)</span></font></div><div><span style="background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">            }.b</span>ind(</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(70, 99, 204); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">this</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">),</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(173, 66, 239); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">500</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">)</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">        }</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">    }</span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">    要求：封装事件委托的函数</span></div><div><br/></div></div><div><br/></div><div><span style="font-size: 18px;">3.JSON.parse和JSON.stringify</span></div><div style="box-sizing: border-box; padding: 8px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">    JSON是一种高效的数据存储格式，JSON的结构和对象一致，也是以键值对的形式来进行存储的；但是JSON是字符型数据</span></span></span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">    ECMAScript5中新增了对象和JSON数据的有序化和反序化方法：</span></span></span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">    JSON.parse(str)            将json字符转换成对象</span></span></span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">    JSON.stringify(obj)        将对象转换成json字符串</span></span></span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">    对象的key必须放在双引号内var obj = {"left":10}</span></span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">    json的字符串必须是单引号var str = '{"left":10}'</span></span></span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">   </span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 38, 0); font-family: &quot;Courier New&quot;;">注意：在JSON数据文件中，不允许出现undefined和function和NaN，在强制转换过程中会省略undefined和function的属性，将NaN转成null</span></span></div><div><br/></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">    实现深拷贝的黑科技：</span></span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">    如果遇到👇这种情况</span></span></span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 99, 204); font-family: &quot;Courier New&quot;;">    var</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: &quot;Courier New&quot;;">obj1</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: &quot;Courier New&quot;;">=</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: &quot;Courier New&quot;;">{</span></div><div><font face="Courier New" style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: &quot;Courier New&quot;; color: rgb(6, 6, 6); font-variant-caps: normal; font-variant-ligatures: normal;">        name</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: &quot;Courier New&quot;; color: rgb(79, 93, 102); font-variant-caps: normal; font-variant-ligatures: normal;">:</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: &quot;Courier New&quot;; color: rgb(6, 6, 6); font-variant-caps: normal; font-variant-ligatures: normal;">{</span></font></div><div><font face="Courier New" style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: &quot;Courier New&quot;; color: rgb(6, 6, 6); font-variant-caps: normal; font-variant-ligatures: normal;">            name2</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: &quot;Courier New&quot;; color: rgb(79, 93, 102); font-variant-caps: normal; font-variant-ligatures: normal;">:</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: &quot;Courier New&quot;; color: rgb(6, 6, 6); font-variant-caps: normal; font-variant-ligatures: normal;">{</span></font></div><div><font face="Courier New" style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: &quot;Courier New&quot;; color: rgb(6, 6, 6); font-variant-caps: normal; font-variant-ligatures: normal;">                name3</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: &quot;Courier New&quot;; color: rgb(79, 93, 102); font-variant-caps: normal; font-variant-ligatures: normal;">:</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: &quot;Courier New&quot;; color: rgb(6, 6, 6); font-variant-caps: normal; font-variant-ligatures: normal;">{</span></font></div><div><font face="Courier New" style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: &quot;Courier New&quot;; color: rgb(6, 6, 6); font-variant-caps: normal; font-variant-ligatures: normal;">                    name4</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: &quot;Courier New&quot;; color: rgb(79, 93, 102); font-variant-caps: normal; font-variant-ligatures: normal;">:</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: &quot;Courier New&quot;; color: rgb(40, 156, 151); font-variant-caps: normal; font-variant-ligatures: normal;">"admin";</span></font></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">                }</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">            }</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">        }</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">    }</span></span></div><div><span style="font-size: 14px; font-family: &quot;Courier New&quot;;">    使用for-in遍历只能实现一层深拷贝</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 99, 204); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">    var</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">obj2</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">=</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">{};</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">    for</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">(</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 99, 204); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">var</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">i</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">in</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">obj1){</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">        obj2[i]</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">=</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">obj1[i];</span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">    }</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">    利用json转换</span></span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">    var obj2</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">=</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(173, 66, 239); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">JSON</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">.parse(</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(173, 66, 239); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">JSON</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">.stringify(obj1));</span></div><div><br style="color: rgb(255, 38, 0);"/></div></div><div><br/></div><div><br/></div><div><br/></div><div>ES6↓↓↓</div><div><br/></div><div><span style="font-size: 18px;">4.let／const</span></div><div style="box-sizing: border-box; padding: 8px; font-size: 12px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    ES6中新增的声明变量的方式：</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    </span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 38, 0); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">let</span>关键字用来声明变量，类似于var，但是使用let声明的变量有以下几点特性：</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    1.不存在变量提升</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    2.暂时性死区</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    3.不允许重复声明，同一作用域内只能声明一次</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    4.新增的块级作用域</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">        <span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">for(作用域A){作用域B}  循环的应用；</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    5.全局变量不会绑定到window对象</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    </span></div><div><br/></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">   </span><span style="font-size: 12px;" /><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 38, 0); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">const</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">关键字用来声明常量，其使用规则除了声明之后不能修改之外，其他特性和let一样</span></div><div><br/></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    本质上来说，const声明的变量并不是变量的值不能改动，而是变量指向的内存地址不得改动，简单的数据类型（数字，字符串，布尔），值就保存在变量指向的那个内存地址，因此等同于常量，但是对于复合型的数据（对象和数组），变量指向的内存地址，保存的只是一个指针，const只能保证这个指针是固定的，至于指向的数据结构就不能控制到了</span></div><div><br/></div></div><div><br/></div><div><span style="font-size: 18px;">5.字符串扩展</span></div><div style="box-sizing: border-box; padding: 8px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    1.字符串的Unicond表示方式：规则为</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 38, 0); font-family: Monaco;">\u + 四位十六进制</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">；</span></font></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        如console.log(“\u0061”);        //打印a</span></span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        只能是\u0000~\uffff之间的数据，如果超出范围，必须用双子节表示</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        </span></span></div><div><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        console.log(“\uD842\uDFB6”)    //打印 </span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">𠮶 </span></font></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">            上面是老版本的字符的表达方式</span></span></div><div><br/></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">  </span> <span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">     如果不按照规则书写</span></span></div><div><br/></div><div><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        console.log("\uD842\uDFB69”)   //打印 </span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">𠮶9</span></font></div><div><br/></div><div><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        如果想要一次性表示超出范围的字符那么我们可以使用{}来表示；</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">例如:</span></font></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">     </span></span></span></span></div><div><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        console.log("\u20BB9");  这个的打印结果是 拆分开来的 <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">₻</span></span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">9</span></font></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">     </span></span></span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        console.log("\u{20BB9}"); 这个打印的结果是一个完整的字符 𠮹</span></span></span></span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        ES6支持多种格式的字符表示;</span></span></span></div><div><br/></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    2.字符串的新增方法：</span></span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        2.1  </span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco; font-weight: bold;">codePointAt()</span></span></span></div><div><br/></div><div><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        console.log("\u{</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 122, 116); font-family: Monaco; font-weight: bold;">20BB9</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">}");</span></font></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">  </span></span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        var s = "𠮹";</span></span></span></div><div><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        console.l</span></span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">og(s.length)         // 2</span></font></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        console.log(s.charAt(0))      // ''</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        console.log(s.charAt(1))      // ''</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        console.log(s.charCodeAt(0))  // 55362</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        console.log(s.charCodeAt(1))  // 57273</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">     </span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        通常来说一个字符占两个字节，对于那些需要占四个字节的字符，JAVAScript用两个字符来表示;</span></span></div><div><br/></div><div><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        55362 和 57273是十进制的字符表示我们可以通过在线转换转换成 16进制 ;   在线转换地址:</span><a href="http://tool.oschina.net/hexconvert/" style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco;">http://tool.oschina.net/hexconvert/</a></font></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">          </span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        这两个字符在UTF-16中编码为 0xD842   和  0xDFB9 储存起来需要四个字节，那么对于这样四个字节的东西javascript 无法正确判断，而是将其解析为两个字符；</span></span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        charCodeAt会分别返回前两个字节和后两个字节的值; 而charAt压根就无法识别;</span></span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        在ES6中提供给我们一个新的方法codePointAt(); 这个方法可以正确解析四个字节的字符。</span></span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        var s = "𠮹";</span></span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        console.log(s.codePointAt()) // 134073</span></span></div><div><br/></div><div><br/></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        2.2</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco; font-weight: bold;"> String.fromCodePoint()  </span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    相当于ES5内的</span><span style="box-sizing: border-box; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">String.fromCharCode()</span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        先说说 String.fromCharCode()方法；这个方法无法正确识别 32位的 UTF-16字符（也就是上面提到的四个字节的字符 Unicode编码 大于 0xFFFF）;</span></span></div><div><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        console.log(String.fromCharCode(0x20BB9 )) //  <img src="DAY14%EF%BC%9AES5%E5%8F%8AES6.resources/43075FF3-77E5-4BC7-8341-D5CCDBCE3A99.png" height="68" width="115"/></span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;"> 出现了一个奇怪的字符</span></font></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        </span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        原因是什么那？ 因为fromCharCode不识别四个字节的字符， 他会将第一位省略掉 ， 也就是将 0x20BB9 去掉开头 变成了0x0BB9;所以出现的结果不正确;</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        </span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        但是ES6中的String.fromCodePoint()可以正确识别这样的编码;</span></span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        console.log(String.fromCodePoint(0x20BB9)) //𠮹 显示正确;</span></span></div><div><br/></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        2.3</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco; font-weight: bold;"> repeat()</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">重复功能</span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        'x'.repeat(3)  //xxx；</span></span></div><div><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        </span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">重复字符串;</span></font></div><div><br/></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    </span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    </span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        2.4  indexOf()补充includes() startsWith() endsWith() 判断字符串中是否存在某个字符串：</span></span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        var s = 'Hello world!';</span></span></div><div style="margin-left: 40px;"><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">   s.startsWith('Hello')   // true       以参数开头</span></span></div><div style="margin-left: 40px;"><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">   s.endsWith('!')         // true       以参数结尾</span></span></div><div style="margin-left: 40px;"><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">   s.includes('o')         // true       包括参数;</span></span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        第二种方法接受第二个参数，第二个参数表示从第几位开始;</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        var s = 'Hello world!';</span></span></div><div style="margin-left: 40px;"><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">   s.startsWith('world', 6) // true</span></span></div><div style="margin-left: 40px;"><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">   s.endsWith('Hello', 5) // true</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        s.includes('Hello', 6) // false</span></span></div><div><br/></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    3.for of一种新的遍历方式：</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        for-of可以用于便利字符串</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        var s = "abc";</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        for(let  b of s){</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">            console.log(b) // "a"  "b"  "c"</span></span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">       </span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">}</span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco;">    </span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco;">    类似于for-in的使用方式</span></span></div><div><br/></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    4.字符串模版扩展：</span></span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        ES6中存在一种新的字符串， 这种字符串是 以 ` `  (波浪线上的那个字符 &gt; 反引号)括起来表示的；</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">      </span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        通常我们想要拼接一个带有标签的字符串， 是用这样的方式:</span></span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        </span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 122, 116); font-family: Monaco;">bianliang</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">+ " &lt;strong&gt;这是一个文字" +</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 122, 116); font-family: Monaco;">obj.name</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">+ "&lt;/strong&gt; " +</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 122, 116); font-family: Monaco;">bianliang</span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        但是有了ES6字符串一切都变得非常简单了;</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">     </span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        ` ${bianliang} &lt;strong&gt;这是一个文字${obj.name}&lt;/strong&gt;${bianliang} `</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">          </span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        用 ${ } 扩住变量让拼接变得非常容易;</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">     </span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        非常简单的换行；</span></span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        console.log(`string text line 1</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">                    string text line 2`);</span></span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        模板还可以调用函数；</span></span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        function fn() {</span></span></div><div><font face="Monaco" style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(51, 51, 51);">            </span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(51, 51, 51);">return "Hello World”;</span></font></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        }</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        `foo ${fn()} bar`</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        </span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        强大的ES6字符串;</span></span></div><div style="font-size: 12px;"><br/></div></div><div><br/></div><div><span style="font-size: 18px;">了解：正则的扩展</span></div><div style="box-sizing: border-box; padding: 8px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">- 正则扩展   </span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    1.u</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    ES6对正则表达式添加了u修饰符，含义为“Unicode模式”，用来正确处理大于\uFFFF的Unicode字符。也就是说，会正确处理四个字节的UTF-16编码。</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    /^\S$/.test('𠮷') // false</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    /^\S$/u.test('𠮷') // true</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    </span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    2.y</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    ES6添加了y修饰符和g类似，不过y 修饰符在下次匹配的时候需要紧跟上次匹配成功之后的结果匹配，而g则是全局匹配;</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px;"><br/></span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    3.exec() 方法在匹配全局对象的时候， 多次匹配会在上一次结束的地方继续匹配;</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    var s = 'aaa_aa_a’;</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    var r1 = /a+/g;</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    var r2 = /a+/y;</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    </span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    r1.exec(s) // ["aaa”]</span></span></div><div><font face="Monaco" style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(51, 51, 51);">    </span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(51, 51, 51);">r2.exec(s) // ["aaa”]</span></font></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    r1.exec(s) // ["aa”]</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    r2.exec(s) // null</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    </span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    </span></span></div></div><div><br/></div><div><br/></div><div><br/></div><div><span style="font-size: 18px;">掌握ES5内容</span></div><div><br/></div><div><br/></div><div><br/></div><div><span style="font-size: 18px;">1. =&gt;函数</span></div><div style="box-sizing: border-box; padding: 8px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div><span style="font-size: 19px;"><span style="background-color: rgb(251, 250, 248); font-size: 19px; color: rgb(51, 51, 51); font-family: Monaco; font-weight: bold;">优点：</span></span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    老语法：</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    </span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">var test = function(x){</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">        return x+2;</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    }</span></div><div style="font-size: 12px;"><br/></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    箭头函数</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    var test = (x)=&gt;x+2;</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    var  函数名 = 参数 =&gt; 运算规则;</span></div><div style="font-size: 12px;"><br/></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    <span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco; font-weight: bold;">省略了function、return关键字和大括号。</span></span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    </span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    使用方法跟以前一样没区别 test(5); </span></div><div style="font-size: 12px;"><br/></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    结果： 7</span></div><div style="font-size: 12px;"><br/></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    还有好处就是，<span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco; font-weight: bold;">自动绑定外层this</span></span></div><div style="font-size: 12px;"><br/></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    var obj = {    </span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">        left : 200,</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">        move : function(){</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">            setTimeout(function(){</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">                //this.left = 100;</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">                //以前这里不能写this</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">            },1000);</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">        }</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    }</span></div><div style="font-size: 12px;"><br/></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    使用了箭头函数：</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    var obj = {</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        left : 200,</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        move : function(){</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">            setTimeout( ()=&gt;{</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">                this.left = 100;</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">            },1000);</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        }</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    }</span></div><div style="font-size: 12px;"><br/></div><div style="font-size: 12px;"><br/></div><div><span style="font-size: 19px;"><span style="background-color: rgb(251, 250, 248); font-size: 19px; color: rgb(51, 51, 51); font-family: Monaco; font-weight: bold;">缺点：</span></span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    第一： 箭头函数是不能new的，它的设计初衷就跟构造函数不太一样</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    第二： 箭头函数如果要返回一个JSON对象，必须用小括号包起来 var test = ()=&gt;({id:3, val=20})</span></div><div style="font-size: 12px;"><div><span style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    第三： 对代码的可读性伤害太大</span></span></span></div></div><div style="font-size: 12px;"><br/></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    </span></div><div><span style="font-size: 16px;"><span style="background-color: rgb(251, 250, 248);"><span style="font-size: 16px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco; font-weight: bold;">总结：</span></span></span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    在回调函数的时候，偶尔用用箭头函数，还是不错的 [2,3,9,14,8,29,93,30].sort( (a,b) =&gt; a-b );</span></div><div style="font-size: 12px;"><br/></div></div><div><br/></div><div><span style="font-size: 18px;">2.解构赋值</span></div><div style="box-sizing: border-box; padding: 8px; font-size: 12px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    var [a,b,c] = [1,2,3];</span></div><div><br/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    var <span style="min-height: 17pt; font-size: 15pt; background-color: rgb(227, 220, 137); color: rgb(149, 163, 171); font-family: consolas;">{age,name,like} = {name:"admin",age:18,sex:true}</span></span></div><div><br/></div><div><span style="font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    扩展</span></div><div><br/></div><div><span style="font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">字符，函数的参数</span></div></div><div><br/></div><div><span style="font-size: 18px;">4.Symbol类型</span></div><div style="box-sizing: border-box; padding: 8px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;"> </span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">   新增的数据类型：</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); font-family: Monaco;">    </span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); font-family: Monaco;">    var s1 = Symbol();</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco;">    var s2 = Symbol();</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco;">    var s3 = Symbol("abc");</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco;">    var s4 = Symbol("abc");</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco;">    </span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco;">    //s1不等于s2</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco;">    //s3不等于s4</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco;">     </span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco;">    Symbol函数会生成一个唯一的值可以理解为Symbol类型跟字符串是接近的 但每次生成唯一的值，也就是每次都不相等，至于它等于多少，并不重要 这对于一些字典变量，比较有用</span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco;">    </span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 99, 204); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">var</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(173, 66, 239); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">SIZE</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">=</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">{</span></div><div><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(173, 66, 239); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">        MIDDLE</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(79, 93, 102); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">:</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">Symbol(),</span></font></div><div><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(173, 66, 239); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">        SMALL</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(79, 93, 102); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">:</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">Symbol(),</span></font></div><div><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(173, 66, 239); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">        LANGE</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(79, 93, 102); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">:</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">Symbol()</span></font></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">    }</span></div><div><br/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(70, 99, 204); font-family: Monaco;">    var</span> <span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">obj</span> <span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(105, 137, 6); font-family: Monaco;">=</span> <span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">{};</span></div><div><br/></div><div><font face="Monaco" style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(105, 137, 6); font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">    switch</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(6, 6, 6); font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">(</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(173, 66, 239); font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">SIZE</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(6, 6, 6); font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">.</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(173, 66, 239); font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">LANGE</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(6, 6, 6); font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">){</span></font></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">        case</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(173, 66, 239); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">SIZE</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">.</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(173, 66, 239); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">MIDDLE</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(79, 93, 102); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">:</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">obj.size</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">=</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(40, 156, 151); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">"S"</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">;</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">break</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">;</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">        case</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(173, 66, 239); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">SIZE</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">.</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(173, 66, 239); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">SAMLL</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(79, 93, 102); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">:</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">obj.size</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">=</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(40, 156, 151); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">"M"</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">;</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">break</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">;</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">        case</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(173, 66, 239); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">SIZE</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">.</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(173, 66, 239); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">LANGE</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(79, 93, 102); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">:</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">obj.size</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">=</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(40, 156, 151); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">"L"</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">;</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">break</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">;</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal;">    }</span></div><div><br/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(74, 138, 1); font-family: Monaco;">    console</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">.log(obj);</span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco;">    //以前我们可能会把small、middle、lange赋值为数字或字符串</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); font-family: Monaco;">    //还要确保它们的值不能发生重复，但现在不用担心了</span></div><div><br/></div></div><div><br/></div><div><span style="font-size: 18px;">5.Set和Map结构</span></div><div style="box-sizing: border-box; padding: 8px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    想当初设计JS的时候，由于有SUN公司人员的参与 再加上当时如日中天的JAVA及其优秀</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">的设计，才使得JS语法及内存设计跟JAVA会如此的接近。</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">但JAVA很多优秀的内容，JS不知道为了什么目的并没有引入，例如Set和Map集合</span></div><div style="font-size: 12px;"><br/></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    Set集合，本质上就是对数组的一种包装 例如：</span></div><div style="font-size: 12px;"><br/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">  </span> <span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;"> let imgs = new Set();</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    imgs.add(1);</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    imgs.add(1);</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    imgs.add(5);</span></span></div><div><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    </span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">imgs.add("5");</span></font></div><div><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    </span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">imgs.add(new String("abc"));</span></font></div><div><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    </span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">imgs.add(new String("abc"));</span></font></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    打印的结果： 1  5  '5'  'abc'  'abc'</span></span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    Set集合是默认去重复的，但前提是两个添加的元素严格相等 所以5和"5"不相等，两个new出来的字符串不相等</span></span></div><div><br/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    //普通for-of循环(for-of跟for-in的区别很明显，就是直接取值，而不再取下标了)</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;"> </span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    for(let item of imgs){  </span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">        console.log(item);        //a    //b    //c</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    }</span></div><div style="font-size: 12px;"><br/></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    set集合没有提供下标方式的访问，因此只能使用for-of来遍历。</span></div><div style="font-size: 12px;"><br/></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    // 下面展示了一种极为精巧的数组去重的方法</span></div><div style="font-size: 12px;"><br/></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    let arr = [1,2,3,4,4,3,2,4,1,5,6]</span></div><div style="font-size: 12px;"><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    let mySet = new Set(arr);</span></div></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    let newArr = [];</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    for(let i of mySet){</span></div><div style="font-size: 12px;"><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">        newArr.push(i);</span></div></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    }</span></div><div style="font-size: 12px;"><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    console.log(newArr);</span></div></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    </span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    关于遍历的方法 由于Set集合本质上还是一个map，因此会有以下几种奇怪的遍历方法</span></span></div><div style="font-size: 12px;"><br/></div><div style="font-size: 12px;"><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    //根据keys遍历</span></div></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    var imgs = new Set(['a','b','c']); //根据key遍历</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    for(let item of imgs.keys()){</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        console.log(item);        //a  //b  //c</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    }</span></div><div style="font-size: 12px;"><br/></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    //根据value遍历</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    for(let item of imgs.values()){</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        console.log(item);        //a  //b  //c</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    }</span></div><div style="font-size: 12px;"><br/></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    //根据key-value遍历</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    for(let item of imgs.entries()){</span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">        console.log(item);        //['a','a'] //['b','b'] //['c','c'] </span></span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    }</span></div><div style="font-size: 12px;"><div><br/></div></div><div style="font-size: 12px;"><br/></div><div style="font-size: 12px;"><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    Map集合,即映射</span></div></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;"> </span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    let map = new Map();</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;"> </span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    map.set("S230", "张三");</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    map.set("S231", "李四");</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    map.set("S232", "王五");</span></div><div style="font-size: 12px;"><br/></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    获取某一个元素 map.get("s232"); //王五</span></div><div style="font-size: 12px;"><br/></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    //循环遍历，配合解构赋值 for(let [key,value] of map){     console.log(key,value); }</span></div></div><div><br/></div><div><span style="font-size: 18px;">7.了解class的写法和继承</span></div><div style="box-sizing: border-box; padding: 8px; font-size: 12px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">class保留字终于成了关键字</span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">终于，我们在有生之年等到class出现了 这下，JS看起来更像一个标准的面相对象的语言了</span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">以前编写一个构造函数（类）</span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">function Pad(color){</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    this.color = color;</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">}</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">现在的写法跟Java更接近了</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">class Iphone{</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    constructor(color, size){</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">            this.color = color;</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">            this.size = size;    </span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    }    </span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    playgame(){</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">           //.............    </span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    }    </span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    toString(){</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">          return `这台手机的颜色是${this.color} 屏幕大小是${this.size}`;</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    }</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">}</span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">我们定义了一个类，名字叫Iphone 通过类生成一个实例： var iphone = new Iphone("白色", 5);</span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">其中constructor被称之为构造方法，在我们new 一个对象的时候，自动被调用</span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">不过本质上，JS依然使用了原型来实现，也就是说，这不过是一个新的写法而已 跟以前的构造函数没有区别。</span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">要注意的是，使用了class来定义类，必须先定义再使用</span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">以前这样写没有问题：</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">     new Person();</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">     function Person(){ }</span></div><div style="margin-left: 40px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">现在这样写报错：</span></div><div style="margin-left: 40px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">new Person();</span></div><div style="margin-left: 40px;"><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">class Person{</span></div></div><div style="margin-left: 40px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    constructor(){ </span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">}</span></div><div style="margin-left: 40px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">}</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">     甚至还可以定义一次性的类</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">     let person = new class{</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">         constructor(){</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">}</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">     }();</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">这个类被定义出来，只能实例化一次，跟JAVA的匿名内部类很像</span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">关于继承</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">class Son extends Father{</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    constructor(age){</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">         super(); //这相当于调用了父类的构造方法，类似于传统写法Father.call(this)</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">                  //但是这个方法是必须放在第一行先调用  </span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">         this.age = age;</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    }</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">}</span></div></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><span style="font-size: 18px;">1.了解class面向对象编程</span></div><div><br/></div><div><span style="font-size: 18px;">2.掌握ES6语法的灵活运用</span></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><span style="font-size: 18px;">1.封装拖拽效果</span></div><div><br/></div><div><span style="font-size: 18px;">2.封装常见兼容</span></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div></body></html>